<template>
  <card class="insure-card" title="保养记录" :showDivider="false">
    <table-index class="insure-card-table" :table="table" @loadData="loadData" >
      <template #assetFeeInfo="{ record }">
        {{ record.maintenanceAmount }}
        <div class="maintenanceStatus" :class="{ payed: record.assetFeeStatus == 1 }">{{ record.assetFeeStatusName }}</div>
      </template>
    </table-index>
  </card>
</template>
<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getMaintenanceList } from '@/api/asset/maintenance'

  const props = defineProps<{
    orderId: number
  }>()
  const queryParam = reactive({
    orderId: props.orderId,
  })
  const table = useTable({
    queryParam,
    columns: [
      { title: '下次保养里程', dataIndex: 'estimatedKilometre' },
      { title: '下次保养日期', dataIndex: 'estimatedTime' },
      { title: '保养单关联门店', dataIndex: 'siteName' },
      { title: '本次保养里程', dataIndex: 'entranceKilometre' },
      { title: '本次保养日期', dataIndex: 'entranceDate' },
      { title: '修理厂', dataIndex: 'maintenanceShop' },
      { title: '收支类型', dataIndex: 'costTypeName' },
      { title: '保养费', slotName: 'assetFeeInfo', unit: '元' },
      { title: '负责人', dataIndex: 'undertaker' },
      { title: '保养单号', dataIndex: 'maintenanceNo', width: 150 },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParam, getMaintenanceList)

  onMounted(() => {
    loadData()
  })
</script>
<style scoped lang="less">
  .maintenanceStatus {
    color: #f53f3f;
    &.payed {
      color: #00b42a;
    }
  }
</style>
